<script setup>
import { ref } from 'vue'
import MyIcon from '@/components/my-icon/index.vue'
</script>
<template>
	<div class="customer-detail-statistic">
		<div class="record-seat-tip-wrap">
			<div class="tip-text">
				<el-icon class="ame-alert-icon"><BellFilled /></el-icon>
				聊天记录仅展示成员在配置会话席位期间产生的数据
			</div>
			<el-icon><Close /></el-icon>
		</div>
		<div class="empty-box">
			<img
				class="empty-img"
				src="../../../../../assets/img/img/customer-detail_no_privilege.fce420a3a55e.png"
				style="width: 136px"
				alt=""
			/>
			<div class="empty-description">该客服未配置会话分析席位哦~</div>
		</div>
	</div>
</template>
<style lang="scss" scoped>
.customer-detail-statistic {
	position: relative;
	width: 100%;
	height: 392px;
	.record-seat-tip-wrap {
		position: absolute;
		top: 12px;
		left: 24px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: calc(100% - 48px);
		min-height: 36px;
		padding: 8px 16px;
		margin: 0;
		background-color: #f1f9ff;
		color: #595959;
		font-size: 14px;
		.ame-alert-icon {
			font-size: 15px;
			margin-right: 8px;
			color: #1890ff;
		}
		.tip-text {
			display: flex;
			align-items: center;
		}
	}
	.empty-box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		.empty-description {
			margin-top: 16px;
			font-size: 14px;
			color: #000000a6;
		}
	}
}
</style>
